<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>weixin by lxx</title>
  <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <style>
    *{
      padding: 0;
      margin: 0;
    }
    .imgBox{
      width: 1080px;
      height: 1920px;
      position: relative;
    }
    #canvas{
      /* background: mediumaquamarine; */
      position: absolute;
      top: 0;
      left: 0;
    }
    .item{
      margin-top: 15px;
    }
    .itemLabel{
      display: inline-block;
      width: 100px;
      text-align: right;
    }
    .btn{
      margin-left: 100px;
    }
    .btn2{
      display: block;
      width: 100px;
      height: 35px;
      font-size: 16px;
      padding: 0;
      text-align: center;
      line-height: 35px;
      margin: 15px auto;
      border: 1px solid #ccc;
      box-shadow: 0 0.125rem 0.8rem rgba(0, 0, 0, 0.1) !important;
    }
    #fileOne{
      float: left;
    }
    .box{
      width: 50%;
      height: 700px;
      margin: 50px auto;
      background: white;
      border-radius: 10px;
      box-sizing: border-box;
      padding: 5px 24px;
      box-shadow: 0px 20px 70px 0px rgba(0,0,0,0.3)!important;
    }
  </style>
</head>
<body>
  <div class="box" id="baseInfoBox">
    <div class="input-group item">
      <span class="input-group-addon" id="basic-addon1">时间：</span>
      <input type="text" id="time" class="form-control" aria-describedby="basic-addon1">
    </div>
    <div class="input-group item">
      <span class="input-group-addon" id="basic-addon1">收款方名称：</span>
      <input type="text" id="payee" class="form-control" aria-describedby="basic-addon1">
    </div>
    <div class="input-group item">
      <span class="input-group-addon" id="basic-addon1">账单价格：</span>
      <input type="text" id="price" class="form-control" aria-describedby="basic-addon1">
    </div>
    <div class="input-group item">
      <span class="input-group-addon" id="basic-addon1">支付时间：</span>
      <input type="text" id="payTime" class="form-control" aria-describedby="basic-addon1">
    </div>
    <div class="input-group item">
      <span class="input-group-addon" id="basic-addon1">支付方式：</span>
      <input type="text" id="payType" class="form-control" aria-describedby="basic-addon1">
    </div>
    <div class="input-group item">
      <span class="input-group-addon" id="basic-addon1">交易单号：</span>
      <input type="text" id="transactionNumber" class="form-control" aria-describedby="basic-addon1">
    </div>
    <div class="input-group item">
      <span class="input-group-addon" id="basic-addon1">商户单号：</span>
      <input type="text" class="form-control" placeholder="" id="merchantCode">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button" id="randomCode">生成随机商家和交易单号</button>
      </span>
    </div>
    <div class="input-group item">
      <div style="font-size: 14px;">选择一个logo：</div>
      <div>
        <div class="row">
          <div class="col-xs-6 col-md-3 imgItem">
            <a href="#" class="thumbnail">
              <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602846596465&di=1116c3d354cc135eeab35d38dd97e1d9&imgtype=0&src=http%3A%2F%2Fandroid-artworks.25pp.com%2Ffs08%2F2018%2F06%2F04%2F11%2F110_8296fa1e0940c44486caad402672d3b2_con.png">
            </a>
          </div>
          <div class="col-xs-6 col-md-3 imgItem">
            <a href="#" class="thumbnail">
              <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602847542636&di=79e4de9822b7e608a87ab62f55b2cdbf&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F5d073e72193db4fd3b6813714a6c892ddc3792baead6-KcV0P9_fw658">
            </a>
          </div>
          <div class="col-xs-6 col-md-3 imgItem">
            <a href="#" class="thumbnail">
              <img src="https://uat-img.vandream.com/1/16e27316ffea.png">
            </a>
          </div>
        </div>
      </div>
      <div><span style="float: left;margin-right: 5px;">你也可以自己选择一个本地的logo：</span><input type='file' id="fileOne"></input></div>
    </div>
    <!-- 按钮 -->
    <button id='btn' class="item btn btn2" >生成截图</button>
  </div>

  <div class="imgBox">
    <canvas id="canvas" width="1080" height="1920"></canvas>
  </div>
  <script src="./js/index.js"></script>
</body>
</html>